<template>
  <div>
    <div>
      <div class="pictureList">
        <swiper class="swiper"
                :indicator-dots="true"
                :autoplay="true"
                :interval="2000"
                :duration="500">
          <swiper-item v-for="(item,index) of allPicList" :key="index">
            <div class="swiper_img_wrapper">
              <img class="swiper_img" :src="item" mode="aspectFill"/>
            </div>
          </swiper-item>
        </swiper>

      </div>
    </div>
    <div class="head_title">
      {{title}}
    </div>
    <div class="price">
      <div class="price_num">{{amount}}万</div>
<!--      <div class="price_btn" @click="gotoRongzifuwu">我要融资</div>-->
    </div>
    <div class="detail">
      <div class="detail_item_long"><!--电站名称较长需单独一行-->
        <span class="detail_item_label">电站名称</span>
        <span class="detail_item_content_long">{{ dianZhanMingCheng }}</span>
      </div>
      <div class="detail_item_long" >
        <span class="detail_item_label">所属区域</span>
        <span class="detail_item_content_long">{{ area }}</span>
      </div>
      <div class="detail_item" v-for="(item,index) of detailList" :key="index">
        <span class="detail_item_label">{{ item.label }}</span>
        <span class="detail_item_content">{{ item.content }}</span>
      </div>
<!--      <div class="detail_login">-->
<!--        登录以查看电站名称-->
<!--        <uni-icons type="right" size="15"></uni-icons>-->
<!--      </div>-->
<!--      <div class="detail_consult">-->
<!--        技改咨询-->
<!--        <uni-icons type="right" size="15"></uni-icons>-->
<!--      </div>-->
    </div>
    <div class="block" v-if="custphone"><!--如果有客户电话则展示打电话框-->
      <div class="manager">
        <img class="manager_photo" :src="photo"/><!--src="../../static/img/mine/touxiang.png"-->
        <div class="manager_detail">
          <div class="manager_name">{{custname}}</div>
          <div class="manager_edit">详情电询客户</div><!--了解详细信息联系业务员-->
          <!-- <div class="manager_edit">产品详细信息和费用信息了解透彻</div>-->
        </div>
        <div class="manager_call" @tap="phoneCall">拨打电话</div>
      </div>
    </div>
    <div class="block">
      <!--      <div class="title">视频</div>-->
      <!--      <img class="media_video" src="../../static/img/stationDetail/video.png"/>-->

      <div class="title">机房及设备</div>
      <img class="media_picture"
           v-for="(item,index) of jiFangPicList"
           :class="index%2===0?'media_picture':'media_picture-right'"
           :key="index"
           :src="item"/>

      <div class="title">前池</div>
      <img class="media_picture"
           v-for="(item,index) of qianChiPicList"
           :class="index%2===0?'media_picture':'media_picture-right'"
           :key="index"
           :src="item"/>

      <div class="title">取水口及库区</div>
      <img class="media_picture"
           v-for="(item,index) of jiShuiKouPicList"
           :class="index%2===0?'media_picture':'media_picture-right'"
           :key="index"
           :src="item"/>

      <div class="title">其他</div>
      <img class="media_picture"
           v-for="(item,index) of otherPicList"
           :class="index%2===0?'media_picture':'media_picture-right'"
           :key="index"
           :src="item"/>
    </div>
    <div class="block">
      <div class="title">电站描述</div>
      <div class="content">
        {{gk}}
      </div>
    </div>
<!--    <div class="block">-->
<!--      <div class="title">卖方需求</div>-->
<!--      <div class="content">-->
<!--        {{yzyq}}-->
<!--      </div>-->
<!--    </div>-->

    <div class="block">
      <div class="title">其他电站信息</div>
      <div class="detail_item" v-for="(item,index) of otherDetailList" :key="index">
        <span class="detail_item_label_long">{{ item.label }}</span>
        <span class="detail_item_content">{{ item.content }}</span>
      </div>
    </div>
<!--    <div class="block" v-if="phone">&lt;!&ndash;如果有业务员电话则展示打电话框&ndash;&gt;-->
<!--      <div class="manager">-->
<!--        <img class="manager_photo" src="../../static/img/mine/touxiang.png"/>-->
<!--        <div class="manager_detail">-->
<!--          <div class="manager_name">{{name}}</div>-->
<!--          <div class="manager_edit">产品详细信息和费用信息了解透彻</div>-->
<!--        </div>-->
<!--        <div class="manager_call" @click="phoneCall">打电话</div>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
  import wxPromisify from "@/libs/wxPromisify";
  import LoginManager from "@/utils/LoginManager";

  export default {
    name: "showSellDetail",
    data() {
      return {
        title:'',
        amount:'',
        gk:'',
        yzyq: '',
        detailList: [],
        otherDetailList: [],
        jiFangPicList: [],
        qianChiPicList: [],
        jiShuiKouPicList: [],
        otherPicList: [],
        photo:'',//头像
        custname:'',//客户姓名
        custphone:'',//客户电话
        // name:'',//业务员姓名
        // phone:'',//业务员电话
        dianZhanMingCheng:'',//电站名称
        area:'',//所属区域
      }
    },
    computed: {
      allPicList() {
        let list = [
          ...this.jiFangPicList,
          ...this.qianChiPicList,
          ...this.jiShuiKouPicList,
          // ...this.otherPicList
        ]

        //console.log('allPicList', list);
        return list;
      }
    },
    methods: {
      // async fetchLoginInfo() {
      //   if(this.$LoginManager.getLoginType()==="admin"){//业务员
      //     await this.$LoginManager.CheckLoginByCode();
      //     let isLogin = this.$LoginManager.checkLoginStatus();
      //     if (!isLogin) {
      //       await wxPromisify.navigateTo({
      //         url: '/pages/login/adminIndex'//业务员登录
      //       })
      //     }
      //   }else if(this.$LoginManager.getLoginType()===""||this.$LoginManager.getLoginType()===null || this.$LoginManager.getLoginType()===undefined){//以前没登陆过跳转到登录页
      //     await wxPromisify.navigateTo({
      //       url: '/pages/login/adminIndex'
      //     })
      //   }
      // },
      async fetchLoginInfo() {
        if(this.$LoginManager.getLoginType()==="admin"){//业务员
          let isLogin = this.$LoginManager.checkLoginStatus();
          if (!isLogin) {
            await wxPromisify.navigateTo({
              url: '/pages/login/adminIndex'//业务员登录
            })
          }else{
            let {returnCode, resultData} = await LoginManager.appletsCheckToken(LoginManager.getToken());//校验token是否过期
            if(returnCode!="0"){//token已过期 不存在
              let {returnCode, resultData} = await this.$LoginManager.CheckLoginByCode();//以前登陆过重新生成token
              if(returnCode!="0"){//returnCode等于0代表自动登录，不为0代表该openid在表中未查到，打开登录页面
                await wxPromisify.navigateTo({
                  url: '/pages/login/adminIndex'//业务员登录
                })
              }
            }
          }
        }else if(!this.$LoginManager.getLoginType()){//以前没登陆过跳转到登录页
          await wxPromisify.navigateTo({
            url: '/pages/login/adminIndex'
          })
        }
      },
      // gotoRongzifuwu() {
      //   wxPromisify.navigateTo({
      //     url: '/pages/financingServices/index'
      //   })
      // },
      convertList(str) {
        return str ? str.split(',') : []
      },
      phoneCall() {
        wx.makePhoneCall({//给客户打电话
          phoneNumber: this.custphone,
          success: function (res) {
            console.log('dadianhua:', res.data);
          }
        })
      },
    },
    onLoad(options) {
      console.log('options==',options);
      this.fetchLoginInfo();
      let params = {
        token: LoginManager.getToken(),
        id:options.id,//'bd89c53e6b2549baad282133e164c34d',//
        source:'adminMine',
      }
      this.$Api.getProdInfo(params)
        .then((res) => {
          //console.log('res====', res);
          let data = res.data;
          this.title=data.title;//标题
          this.amount=data.amount;//电站售价
          this.gk=data.gk;//电站概况
          //this.yzyq=data.yzyq;//业主要求 卖方需求
          this.dianZhanMingCheng=data.prodname;//电站名称
          this.area=data.area;//所属区域 //'湖南省-株洲市'
          this.detailList = [
            // {
            //   label: '电站名称',
            //   content: data.prodname//'***********'
            // },
            {
              label: '转让方式',
              content: data.zrfs//'全部转让/股份转让'
            },
            // {
            //   label: '',//空，占位
            //   content: ''
            // },
            // {
            //   label: '电站性质',
            //   content: data.xz//'国有'
            // },
            // {
            //   label: '所属区域',
            //   content: data.area//data.province+'-'+data.city//'湖南省-株洲市'
            // },
            {
              label: '投产年份',
              content: data.create_date.substring(0, 4) + '年'//'2005年'
            },
            // {
            //   label: '',//空，占位
            //   content: ''
            // },
            // {
            //   label: '电站类型',
            //   content: data.dzlx//'水电站'
            // },
            {
              label: '装机容量',
              content: data.rl + 'KW'//'2000KW'
            },
            {
              label: '机组数量',
              content: data.sl + '组'//'3组'
            },
            {
              label: '集雨面积',
              content: data.jymj + '平方公里'//'200.0平方公里'
            },
            {
              label: '水头',
              content: data.st+'米'//'200米'
            },
            {
              label: '引水渠长度',
              content: data.ysqcd+'米'//'1000米'
            },
            {
              label: '引水渠类型',
              content: data.ysqlx//'明渠、暗渠'
            },
            {
              label: '压力管长',
              content: data.ylgc+'米'//'1000米'
            },
            {
              label: '压力管直径',
              content: data.ylgzj+'米'//'1米'
            },
            {
              label: '并网线路',
              content: data.bwxl+'米'//'1米'
            },
            {
              label: '并网电压',
              content: data.bwdy+'KV'//'3000毫米'
            },
            {
              label: '年发电量',
              content: data.njfd + '万KW H'//'万KW H/年'
            },
            {
              label: '上网价格',
              content: data.swdj + '元/KW H'
            },
            {
              label: '年均收入',
              content: data.njsr + '万元'
            },
            // {
            //   label: '是否可扩容',
            //   content: data.iskr//'是/否'
            // },
            // {
            //   label: '年降雨量',
            //   content: data.njyl+'毫米'//'3000毫米'
            // },
          ];
          this.otherDetailList = [
            {
              label: '是否在保护区',
              content: data.isreserve
            },
            {
              label: '运营成本',
              content: data.yycb + '万元/年'
            },
            {
              label: '其他补偿费用',
              content: data.qtbcfy + '万元/年'
            },
            {
              label: '营业执照',
              content: data.yyzz? "有" : "无"//有 或者 无
              // content: data.yyzz_url ? "有" : "无"
            },
            {
              label: '取水许可',
              content: data.qsxkz? "有" : "无"
              // content: data.qsxkz_url ? "有" : "无"
            },
            {
              label: '并网调度协议',
              content: data.bwddxy? "有" : "无"
              // content: data.bwddxy_url ? "有" : "无"
            },
            {
              label: '购售电合同',
              content: data.gsdht? "有" : "无"
              // content: data.gsdht_url ? "有" : "无"
            },
            {
              label: '电费收入清单',
              content: data.srqd? "有" : "无"
              // content: data.srqd_url ? "有" : "无"
            },
          ]

          for (let item of this.convertList(data.jfzp_url)) {//机房及设备
            if (item) {
              this.jiFangPicList.push(item);
            }
          }
          for (let item of this.convertList(data.qczp_url)) {//前池
            if (item) {
              this.qianChiPicList.push(item);
            }
          }
          for (let item of this.convertList(data.qskzp_url)) {//取水口
            if (item) {
              this.jiShuiKouPicList.push(item);
            }
          }
          for (let item of this.convertList(data.kqzp_url)) {//库区
            if (item) {
              this.jiShuiKouPicList.push(item);
            }
          }

          let other = [
            ...this.convertList(data.yyzz_url),
            //...this.convertList(data.kqzp_url),
            ...this.convertList(data.qsxkz_url),
            ...this.convertList(data.bwddxy_url),
            ...this.convertList(data.gsdht_url),
            ...this.convertList(data.ysqzp_url),
            ...this.convertList(data.srqd_url),
            //...this.convertList(data.qskzp_url),
          ]

          for (let item of other) {//其他
            if (item) {
              this.otherPicList.push(item);
            }
          }

          //console.log(this.otherPicList);
          this.photo=data.photo!=''&&data.photo!=null?data.photo:'../../static/img/mine/touxiang.png';//头像
          this.custname=data.custname;//客户姓名
          this.custphone=data.custphone;//客户电话
          // this.name=data.name;//业务员姓名
          // this.phone=data.phone;//业务员电话
        })
    }
  }
</script>

<style scoped lang="scss">
  .pictureList {
    width: 750px;
    height: 532px;
  }

  .head_title {
    padding: 40px 28px;
    font-size: 44px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;

  }

  .price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 40px;
    margin-right: 40px;
  }

  .price_num {
    font-size: 48px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #D9261D;
  }

  .price_btn {
    width: 158px;
    height: 64px;
    background: #D9261C;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
  }

  .detail {
    margin-left: 40px;
    margin-top: 36px;
    position: relative;
  }

  .detail_item {
    display: inline-block;
    width: 350px;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    margin-bottom: 30px;
    vertical-align:middle;//垂直居中

    .detail_item_label {
      display: inline-block;
      width: 140px;
      color: #999999;
    }

    .detail_item_label_long{
      display: inline-block;
      width: 168px;
      color: #999999;
    }

    .detail_item_content {
      margin-left: 18px;
      color: #333333;
    }
  }
  .detail_item_long {
    display: inline-block;
    width: 700px;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    margin-bottom: 30px;

    .detail_item_label {
      display: inline-block;
      width: 140px;
      color: #999999;
    }

    .detail_item_content_long {
      margin-left: 18px;
      color: #333333;
    }
  }

  .detail_login {
    position: absolute;
    top: 0;
    right: 42px;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #D9261C;
  }

  .detail_consult {
    position: absolute;
    bottom: 30px;
    right: 42px;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #D9261C;
  }

  .title {
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
    margin-top: 32px;
    margin-bottom: 20px;
  }

  .block {
    border-top: 24px solid #F5F5F5;
    padding: 0 0 30px 40px;
  }

  .media_video {
    width: 670px;
    height: 338px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 16px;
  }

  .media_picture {
    width: 326px;
    height: 200px;
    border-radius: 16px;
  }

  .media_picture-right {
    width: 326px;
    height: 200px;
    margin-left: 18px;
  }

  .content {
    margin-right: 40px;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 48px;
  }

  .manager {
    margin-top: 22px;
    position: relative;

    .manager_photo {
      width: 120px;
      height: 120px;
      vertical-align: top;
    }

    .manager_detail {
      display: inline-block;
      margin-left: 48px;


      .manager_name {
        font-size: 40px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
      }

      .manager_edit {
        margin-top: 26px;
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
    }

    .manager_call {
      width: 132px;
      height: 64px;
      background: #D9261C;
      border-radius: 8px;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 28px;
      right: 36px;
    }
  }

  .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper_img_wrapper {
    //width: 750px;
    //height: 532px;
  }

  .swiper_img {
    width: 750px;
    height: 532px;
    background-size: revert;
  }
</style>